<!-- visible 属性做双向数据绑定 -->
<template>
  <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="650px" append-to-body top="5vh">

    <el-row :gutter="20">

      <el-col :span="16" :offset="2">

        <el-input
          v-model="remark"
          type="textarea"
          :rows="7"
          :placeholder="dialog.placeholder"
          clearable
          size="small"
          style="margin-bottom: 20px;"
        />

      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="handleSubmit">确认</el-button>
      <el-button @click="dialog.visible = false">取消</el-button>
    </div>

  </el-dialog>
</template>

<script>
export default {

  props: {

    visible: {
      type: [Boolean],
      required: true,
      default: false
    }

  },

  data() {
    return {
      remark: null,
      dialog: {
        status: 'create',
        visible: false, // 是否显示
        title: '添加',
        placeholder: ''
      }
    }
  },

  watch: {

    // visible初始化，父组件传过来的visible值如果不同，就更新本组件的visible
    visible(newVal, oldVal) {
      if (newVal !== this.dialog.visible) {
        this.dialog.visible = newVal
      }
    },

    // 子组件更新瞬间影响到父组件传进来的visible
    'dialog.visible'(newVal, oldVal) {
      this.$emit('update:visible', newVal)
    }
  },

  methods: {

    // 点击确认按钮发生的事情
    handleSubmit() {
      if (!this.remark) {
        this.msgError('文本不允许为空！')
        return
      }

      this.$emit('on-ok', this.remark)
    }

    /* handleCancel (){
        this.$emit('on-cancel',this.remark);
      }*/

  }

}
</script>
